<!--
  Copyright 2023 Google LLC
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8" />
    <title>Log in: reCAPTCHA Demo</title>
    <!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Starts -->
    <!-- See: https://cloud.google.com/recaptcha-enterprise/docs/instrument-web-pages#user-action -->
    <script src="https://www.google.com/recaptcha/enterprise.js?render={{context.site_key}}"></script>
    <script type="text/javascript">
      function handleClick(event) {
        event.preventDefault();
        grecaptcha.enterprise.ready(async () => {
          const token = await grecaptcha.enterprise.execute(
            "{{context.site_key}}",
            {
              action: "log_in",
            }
          );
          await doLogin({ token });
        });
      }
    </script>
    <!-- See: https://cloud.google.com/recaptcha-enterprise/docs/create-assessment -->
    <script type="text/javascript">
      async function doLogin({ password = "", token, username = "" }) {
        // Include the token for server-side assessment.
        // Include the user input values from your form to pass to the backend.
        // Always use HTTPS to encrypt plain text credentials!
        const body = {
          password,
          token,
          username,
        };
        // Code for fetching the assessment from server-side goes here.
        // Refer to demo app backend code for more information.
        // If you already use a library or framework for event handlers, you 
        // can handle events your usual way.
        const score = await fetchServerResponse({
          body,
          url: "on_login",
        });
        // In this demo, the assessment score is displayed in the client.
        // But, you should AVOID using the assessment response in the
        // client and handle it on the server-side.
        useAssessmentInClient(score);
      }
    </script>
    <!-- ATTENTION: reCAPTCHA Example (Client Part 1 of 2) Ends -->
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta
      name="description"
      content="Explore the different ways of using reCAPTCHA Enterprise to protect web sites and applications."
    />
    <link
      href="https://fonts.googleapis.com/css?family=Press+Start+2P"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
      rel="stylesheet"
    />
    <link
      rel="icon"
      type="image/x-icon"
      href="../static/favicon-e9e3fe3130a875eb.ico"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="../static/favicon-16x16-e9e3fe3130a875eb.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="../static/favicon-32x32-e9e3fe3130a875eb.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="48x48"
      href="../static/favicon-48x48-e9e3fe3130a875eb.png"
    />
    <link href="../static/global-15fca5ccf020c02b.css" rel="stylesheet" />
    <link href="../static/demo-81d99a00.css" rel="stylesheet" />
    <script src="../static/demo-2af4c10e.js" type="module"></script>
    <script
      async
      defer
      src="../static/global-e680a49614fd8ff8.js"
      type="text/javascript"
    ></script>
  </head>
  <body>
    <recaptcha-demo step="login">
      <!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Starts -->
      <button onclick="handleClick(event)">Log in</button>
      <!-- ATTENTION: reCAPTCHA Example (Client Part 2 of 2) Ends -->
    </recaptcha-demo>
  </body>
</html>
